<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            入 住
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-search"
            class="sureBtn"
            size="medium"
            @click="handleCheck"
          >
            编辑/查看
          </el-button>
          <el-button
            type="danger"
            class="setBtn"
            icon="el-icon-delete"
            size="medium"
            @click="handleDelete"
          >
            删 除
          </el-button>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <div class="search">
            <el-row :gutter="20">
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.name"
                  size="medium"
                  placeholder="老人姓名"
                  clearable
                ></el-input>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.mobile"
                  size="medium"
                  placeholder="联系方式"
                  clearable
                ></el-input>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-date-picker
                  v-model="selectForm.start_time"
                  value-format="timestamp"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="查询开始"
                  size="medium"
                  :picker-options="dataPickerBeforeTodayOptions"
                  style="width: 45%"
                ></el-date-picker>
                <span style="padding: 0 10px">~</span>
                <el-date-picker
                  v-model="selectForm.end_time"
                  value-format="timestamp"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="查询结束"
                  size="medium"
                  :picker-options="dataPickerBeforeTodayOptions"
                  style="width: 45%"
                ></el-date-picker>
                &nbsp;
              </el-col>
              <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                <el-input
                  v-model="selectForm.id_card"
                  size="medium"
                  placeholder="身份证"
                  clearable
                ></el-input>
              </el-col>
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  class="fr"
                  @click="search"
                >
                  搜索
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
        @leave="leave"
        @consumption="consumption"
        @accountTk="accountTk"
        @blllDetail="blllDetail"
      ></app-table>
    </div>
    <!-- 入住登记 -->
    <el-dialog
      title="入住登记"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <common-form
          :key="key"
          :gutter="30"
          :datas="formData"
          @handleMap="handleMap"
        ></common-form>
      </div>
    </el-dialog>
    <!-- 入住登记end -->
    <!-- 离院结算 -->
    <el-dialog
      title="办理离院"
      :visible.sync="dialogVisibleLive"
      width="35%"
      :before-close="closeDialogLive"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <leave-form
          :key="key3"
          :data="formData"
          @cancelLeave="cancelLeave"
          @checkDetail="checkDetail"
        ></leave-form>
      </div>
    </el-dialog>
    <!-- 离院结算end -->
    <!-- 地图 -->
    <el-dialog
      title="选择地址"
      :visible.sync="mapVisible"
      width="60%"
      :before-close="closeMap"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <app-map
          :key="key2"
          ref="map"
          :keyword="keyword"
          @result="result"
        ></app-map>
      </div>
    </el-dialog>
    <!-- 地图end -->
    <!-- 消费明细 -->
    <el-dialog
      title="消费明细"
      :visible.sync="dialogVisibleNurse"
      width="60%"
      :before-close="closeDialogNurse"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-button
                v-if="showAdd"
                type="primary"
                icon="el-icon-plus"
                class="sureBtn"
                size="mini"
                @click="handleAddNurse"
              >
                新增
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="innerPageData.list"
          stripe
          :cell-class-name="set_cell_style"
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == 1"
                size="mini"
                type="danger"
                @click="handleDeleteNurse(scope.row.id)"
              >
                设置无效
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="innerPageData.page"
          layout="total, prev, pager, next, jumper"
          :total="innerPageData.total"
          :page-size="innerPageData.page_size"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <el-dialog
        width="30%"
        title="新增消费"
        :visible.sync="innerVisibleNurse"
        :before-close="closeVisibleNurse"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-form
          ref="xfForm"
          :model="xfForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="消费金额" prop="amount">
                <el-input v-model="xfForm.amount" type="number"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="消费时间" prop="action_time">
                <el-date-picker
                  v-model="xfForm.action_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期时间"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="消费内容" prop="remark">
                <el-input
                  v-model="xfForm.remark"
                  :rows="5"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer" style="padding-left: 100px">
          <el-button
            type="primary"
            class="sureBtn"
            size="mini"
            @click="saveNurse"
          >
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="mini"
            @click="cancelXf('xfForm')"
          >
            取 消
          </el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <!-- 消费明细end -->
    <!-- 记账明细 -->
    <el-dialog
      title="记账明细"
      :visible.sync="dialogVisibleAccount"
      width="60%"
      :before-close="closeDialogAccount"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-button
                type="primary"
                icon="el-icon-plus"
                class="sureBtn"
                size="mini"
                @click="handleAddAccount"
              >
                新增
              </el-button>
              <el-button
                type="success"
                icon="el-icon-plus"
                class="sureBtn"
                size="mini"
                @click="handleSettlement"
              >
                结算
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="accountPageData.list"
          stripe
          :cell-class-name="set_cell_style2"
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            v-for="(item, index) in tableColumns3"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == 1"
                size="mini"
                type="danger"
                @click="handleDeleteAccount(scope.row.id)"
              >
                设置无效
              </el-button>
              <el-button
                v-if="scope.row.status == 2"
                size="mini"
                type="info"
                @click="handleCancelAccount(scope.row.id)"
              >
                取消结算
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="innerPageData.page"
          layout="total, prev, pager, next, jumper"
          :total="innerPageData.total"
          :page-size="innerPageData.page_size"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <el-dialog
        width="30%"
        title="新增记账"
        :visible.sync="innerVisibleAccount"
        :before-close="closeVisibleAccount"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-form
          ref="accountForm"
          :model="accountForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="消费金额" prop="amount">
                <el-input v-model="accountForm.amount" type="number"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="消费时间" prop="action_time">
                <el-date-picker
                  v-model="accountForm.action_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期时间"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="消费内容" prop="remark">
                <el-input
                  v-model="accountForm.remark"
                  :rows="5"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer" style="padding-left: 100px">
          <el-button
            type="primary"
            class="sureBtn"
            size="mini"
            @click="saveAccount"
          >
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="mini"
            @click="canceAccount('accountForm')"
          >
            取 消
          </el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <!-- 记账明细end -->
    <div id="mapStyle"></div>
    <el-dialog
      width="700px"
      title="账单"
      :visible.sync="accountTable"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="printBtn">
        <el-button type="primary" @click="handlePrint">打印</el-button>
      </div>
      <div ref="print" class="dialog-main">
        <el-divider content-position="left">入院费用</el-divider>
        <div class="baseSAccount accountTable">
          <table class="table" width="100%">
            <tr>
              <td>床位费</td>
              <td>{{ baseAccount.bed.price }}元</td>
              <td>护理费</td>
              <td>{{ baseAccount.care.price }}元</td>
            </tr>
            <tr>
              <td>管理费</td>
              <td>{{ baseAccount.care.manage_price }}元</td>
              <td>用餐费</td>
              <td>{{ baseAccount.meal.price }}元</td>
            </tr>
            <tr>
              <td>日用品费</td>
              <td>{{ baseAccount.other_amount }}元</td>
              <td>空调以及取暖费</td>
              <td>{{ baseAccount.power_amount }}元</td>
            </tr>
            <tr>
              <td>医疗备用金</td>
              <td>{{ baseAccount.medical_amount }}元</td>
              <td>时长</td>
              <td>
                <span>{{ baseAccount.date.month }}月</span>
                <span v-if="baseAccount.date.day > 0">
                  {{ baseAccount.date.day }}天
                </span>
              </td>
            </tr>
            <tr>
              <td>住院时间</td>
              <td>{{ baseAccount.live_time }}</td>
              <td>离院时间</td>
              <td>{{ baseAccount.leave_time }}</td>
            </tr>
            <tr></tr>
            <tr>
              <td>总金额</td>
              <td style="color: #ff8000">{{ baseAccount.total_amount }}元</td>
              <td>实收金额</td>
              <td style="color: #ff0000">{{ baseAccount.amount }}元</td>
            </tr>
          </table>
        </div>
        <el-divider v-if="jzAccount.length > 0" content-position="left">
          记账消费
        </el-divider>
        <div v-if="jzAccount.length > 0" class="jzAccount accountTable">
          <table class="table2" width="100%">
            <tr>
              <td>消费内容</td>
              <td>消费金额</td>
              <td>消费时间</td>
            </tr>
            <tr v-for="(item, index) in jzAccount" :key="index">
              <td>{{ item.remark }}</td>
              <td>{{ item.amount }}</td>
              <td>{{ item.action_time }}</td>
            </tr>
          </table>
        </div>
        <el-divider v-if="byjAccount.length > 0" content-position="left">
          备用金消费
        </el-divider>
        <div v-if="byjAccount.length > 0" class="jzAccount accountTable">
          <table class="table2" width="100%">
            <tr>
              <td>消费内容</td>
              <td>消费金额</td>
              <td>消费时间</td>
            </tr>
            <tr v-for="(item, index) in byjAccount" :key="index">
              <td>{{ item.remark }}</td>
              <td>{{ item.amount }}</td>
              <td>{{ item.action_time }}</td>
            </tr>
          </table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import commonForm from "@/components/CommonForm/index";
  import leaveForm from "@/components/CommonForm/leaveForm";
  import {
    getList,
    feesDetail,
    cancelFees,
    billList,
    setNoBill,
    payBill,
    setRecover,
    findAllBill,
  } from "@/api/oldermanager";
  import appMap from "@/components/AppMap/index";
  export default {
    name: "Index",
    components: { appTable, commonForm, leaveForm, appMap },
    data() {
      return {
        keyword: "",
        addIndex: 0,
        map: null,
        key: Math.random(),
        key2: Math.random(),
        key3: Math.random(),
        showAdd: true,
        mapVisible: false,
        accountTable: false,
        dialogVisible: false,
        dialogVisibleLive: false,
        dialogVisibleNurse: false,
        innerVisibleNurse: false,
        innerVisibleAccount: false,
        dialogVisibleAccount: false,
        base: {},
        formData: {
          base: {},
        },
        xfForm: {},
        accountForm: {},
        appFormData: {},
        currentSelectedData: [],
        pageData: {},
        innerPageData: {
          page: 1,
          total: 0,
          page_size: 5,
          list: [],
        },
        accountPageData: {
          page: 1,
          total: 0,
          page_size: 5,
          list: [],
        },
        selectForm: {},
        baseAccount: {
          bed: {},
          care: {},
          meal: {},
          date: {},
        },
        jzAccount: [],
        byjAccount: [],
        innerSelectForm: {},
        accountSelectForm: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {},
        },
        tableColumns: [
          { prop: "name", label: "姓名", width: 100 },
          { prop: "age", label: "年龄", width: 100 },
          {
            prop: "sex",
            label: "性别",
            formatter: this.genderFormatter,
            width: 100,
          },
          { prop: "mobile", label: "联系方式", width: 150 },
          { prop: "id_card", label: "身份证", width: 200 },
          { prop: "floor_str", label: "床位号" },
          {
            prop: "status",
            label: "入住状态",
            formatter: this.statusFormatter,
          },
          {
            prop: "live_time",
            label: "入住时间",
            formatter: this.liveFormatter,
            width: 100,
          },
        ],
        tableColumns2: [
          { prop: "amount", label: "金额" },
          { prop: "action_time", label: "时间" },
          { prop: "remark", label: "消费内容" },
          { prop: "status", label: "状态", formatter: this.feesFormatter },
          { prop: "final_amount", label: "当前余额" },
        ],
        tableColumns3: [
          { prop: "amount", label: "金额" },
          { prop: "action_time", label: "时间" },
          { prop: "remark", label: "消费内容" },
          { prop: "status", label: "状态", formatter: this.accountFormatter },
        ],
        rules: {
          amount: [{ required: true, message: "请输入费用", trigger: "blur" }],
          action_time: [
            { required: true, message: "请选择时间", trigger: "change" },
          ],
          remark: [
            { required: true, message: "请输入消费内容", trigger: "blur" },
          ],
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
      // this.init();
    },
    methods: {
      dataDifference(endDate, startDate) {
        let dataSpan;
        let tempDate;
        let iDays;
        endDate = Date.parse(endDate);
        startDate = Date.parse(startDate);
        dataSpan = startDate - endDate;
        dataSpan = Math.abs(dataSpan);
        iDays = Math.floor(dataSpan / (24 * 3600 * 1000));
        return iDays + 1;
      },
      init() {
        this.map = new BMap.Map("mapStyle");
        this.map.centerAndZoom(new BMap.Point(114.07, 32.13), 8);
        // this.map.centerAndZoom(new BMap.Point(114.35, 34.79), 8);
        // 地图缩放控件
        this.map.setMapStyleV2({
          styleId: "0e5948460769123a23b5c7615b59ae9d",
        });
        this.myGeo = new BMap.Geocoder();
      },
      bdGEO() {
        if (this.addIndex < this.pageData.list.length) {
          var add = this.pageData.list[this.addIndex];
          this.geocodeSearch(add);
          this.addIndex++;
        }
      },
      geocodeSearch(add) {
        let _this = this;
        if (this.addIndex < this.pageData.list.length) {
          setTimeout(_this.bdGEO, 400);
        }
        this.myGeo.getPoint(
          add.address,
          function (point) {
            if (point) {
              var address = new BMap.Point(point.lng, point.lat);
              // console.log(address);
              console.log(
                "update elder set lat='" +
                  address.lat +
                  "',lng='" +
                  address.lng +
                  "' where id=" +
                  add.id +
                  ";"
              );
            }
          },
          "合肥市"
        );
      },
      statusFormatter(row, column) {
        if (row.status == -1) {
          return "已离院";
        } else if (row.status > 0) {
          return "正常";
        } else {
          return "无效信息";
        }
      },
      genderFormatter(row, column) {
        if (row.sex == 1) {
          return "男";
        } else if (row.sex == 2) {
          return "女";
        }
      },
      liveFormatter(row, column) {
        if (row.live_time == 0) {
          return "暂无信息";
        } else {
          return row.live_time;
        }
      },
      feesFormatter(row, column) {
        if (row.status == 1) {
          return "已扣费";
        } else if (row.status == 2) {
          return "已退款";
        } else {
          return "无效记录";
        }
      },
      accountFormatter(row, column) {
        if (row.status == 1) {
          return "未结算";
        } else if (row.status == 2) {
          return "已结算";
        } else {
          return "无效";
        }
      },
      getFeesTable() {
        let data = this.innerSelectForm;
        feesDetail("get", data).then((resp) => {
          if (resp.code === 200) {
            this.innerPageData = resp.data;
            this.dialogVisibleNurse = true;
          }
        });
      },
      getBillTable() {
        let data = this.accountSelectForm;
        billList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.accountPageData = resp.data;
            this.dialogVisibleAccount = true;
          }
        });
      },
      getTableData() {
        let data = this.selectForm;
        getList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", 2);
            // this.addIndex = 0;
            // this.bdGEO();
          }
        });
      },
      getALlBill(data) {
        findAllBill("get", data).then((resp) => {
          if (resp.code === 200) {
            console.log(resp.data);
            let data = resp.data;
            this.accountTable = true;
            this.baseAccount = data.fees;
            this.jzAccount = data.list;
            this.byjAccount = data.fees_list;
            let day = this.dataDifference(
              this.baseAccount.date.start_time,
              this.baseAccount.date.end_time
            );
            console.log(day);
            this.$set(this.baseAccount, "day", day);
          }
        });
      },
      blllDetail(rows) {
        console.log(rows);
        let id = rows.rows[0].id;
        let params = {
          e_id: id,
        };
        this.getALlBill(params);
      },
      handleAdd() {
        this.key = Math.random();
        this.dialogVisible = true;
        this.formData = { base: {} };
      },
      handleDelete() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要删除的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能删除一条内容",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.formData = Object.assign({}, this.currentSelectedData[0]);
              let param = {
                id: this.formData.id,
              };
              getList("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        this.selectForm.page = val;
        this.getTableData();
      },
      handleCheck() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要查看的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能查看一条内容",
            type: "warning",
          });
        } else {
          let params = {
            id: this.currentSelectedData[0].id,
          };
          getList("get", params).then((resp) => {
            if (resp.code === 200) {
              this.formData = resp.data;
              this.base = resp.data.base;
              this.dialogVisible = true;
              this.key = Math.random();
            }
          });
        }
      },
      leave(rows) {
        let params = {
          id: rows.rows[0].id,
        };
        getList("get", params).then((resp) => {
          if (resp.code === 200) {
            this.formData = resp.data;
            this.base = resp.data.base;
            this.dialogVisibleLive = true;
            this.key3 = Math.random();
          }
        });
      },
      cancelLeave(data) {
        this.dialogVisibleLive = false;
        if (data) {
          this.getTableData();
        }
      },
      closeDialogLive() {
        this.dialogVisibleLive = false;
        this.showAdd = true;
      },
      closeDialog() {
        this.dialogVisible = false;
        this.getTableData();
        this.formData = { base: {} };
      },
      handleMap(keyword) {
        this.key2 = Math.random();
        this.mapVisible = true;
        if (keyword) this.keyword = keyword;
      },
      closeMap() {
        this.mapVisible = false;
      },
      result(e) {
        this.mapVisible = false;
        this.$set(this.base, "lng", e.lng);
        this.$set(this.base, "lat", e.lat);
        this.$set(this.base, "address", e.address);
        this.$set(this.formData, "base", this.base);
      },
      search() {
        this.selectForm.page = 1;
        this.getTableData();
      },
      consumption(data) {
        this.innerSelectForm.e_id = data.rows[0].id;
        this.getFeesTable();
      },
      handleAddNurse() {
        this.innerVisibleNurse = true;
        this.$set(this.xfForm, "e_id", this.innerSelectForm.e_id);
      },
      handleDeleteNurse(id) {
        this.$confirm("确定返还费用, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = {
              id: id,
            };
            cancelFees("post", params).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "已返还费用",
                });
                this.getFeesTable();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消返还费用",
            });
          });
      },
      saveNurse() {
        this.$refs["xfForm"].validate(async (valid) => {
          if (valid) {
            feesDetail("post", this.xfForm).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "添加成功",
                });
                this.cancelXf("xfForm");
                this.getFeesTable();
              }
            });
          }
        });
      },
      cancelXf(formName) {
        this.$refs[formName].resetFields();
        this.xfForm = {};
        this.innerVisibleNurse = false;
      },
      closeDialogNurse() {
        this.dialogVisibleNurse = false;
      },
      closeVisibleNurse() {
        this.innerVisibleNurse = false;
      },
      handleInnerCurrentChange(val) {
        this.innerSelectForm.page = val;
      },
      checkDetail(id) {
        this.dialogVisibleNurse = true;
        this.innerSelectForm.e_id = id;
        this.getFeesTable();
        this.showAdd = false;
      },
      accountTk(data) {
        this.accountSelectForm.e_id = data.rows[0].id;
        this.getBillTable();
      },
      handleAddAccount() {
        this.$set(this.accountForm, "e_id", this.accountSelectForm.e_id);
        this.innerVisibleAccount = true;
      },
      handleSelectionChange(rows) {
        this.currentSelectedData = [];
        for (let index = 0; index < rows.length; index++) {
          const element = rows[index];
          this.currentSelectedData.push(element.id);
        }
      },
      handleSettlement() {
        //结算
        if (this.currentSelectedData.length === 0) {
          this.$message({
            type: "warning",
            message: "至少选择一条结算信息",
          });
          return false;
        }
        let idString = this.currentSelectedData.join(",");
        let params = {
          id: idString,
        };
        payBill("post", params).then((resp) => {
          if (resp.code === 200) {
            this.$message({
              type: "success",
              message: "已结算",
            });
            this.canceAccount("accountForm");
            this.getBillTable();
          }
        });
      },
      handleCancelAccount(id) {
        this.$confirm("确定取消结算, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = {
              id: id,
            };
            setRecover("post", params).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "已取消结算",
                });
                this.getBillTable();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      },
      handleDeleteAccount(id) {
        this.$confirm("确定设置无效, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = {
              id: id,
            };
            setNoBill("post", params).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "已设置无效",
                });
                this.getBillTable();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消设置无效",
            });
          });
      },
      saveAccount() {
        this.$refs["accountForm"].validate(async (valid) => {
          if (valid) {
            billList("post", this.accountForm).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "添加成功",
                });
                this.canceAccount("accountForm");
                this.getBillTable();
              }
            });
          }
        });
      },
      closeVisibleAccount() {
        this.innerVisibleAccount = false;
      },
      closeDialogAccount() {
        this.dialogVisibleAccount = false;
      },
      canceAccount(formName) {
        this.$refs[formName].resetFields();
        this.accountForm = {};
        this.innerVisibleAccount = false;
      },
      set_cell_style({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 3) {
          if (row.status == 1) {
            return "green-cell";
          } else if (row.status == 2) {
            return "red-cell";
          } else {
            return "yellow-cell";
          }
        }
      },
      set_cell_style2({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 4) {
          if (row.status == 1) {
            return "yellow-cell";
          } else if (row.status == 2) {
            return "green-cell ";
          } else {
            return "red-cell";
          }
        }
      },
      handlePrint() {
        console.log(111);
        this.$print(this.$refs.print);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff !important;
    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;
      .search {
        width: 100%;
        .search-title {
          flex: 0 0 48px;
          width: 48px;
          line-height: 36px;
          font-size: 16px;
          color: #333;
        }
      }
    }
    .form-footer {
      padding-left: 100px;
    }
    .dialog-main {
      .table-do {
        margin-bottom: 15px;
      }
      ::v-deep {
        th {
          .cell {
            color: #fff;
          }
        }
      }
    }
    .el-table {
      ::v-deep {
        .red-cell div {
          background: rgba($color: #ff0000, $alpha: 1);
          color: #fff;
        }
        .green-cell div {
          background: green;
          color: #fff;
        }
        .blue-cell div {
          background: rgb(64, 158, 255);
          color: #fff;
        }
        .yellow-cell div {
          background: #ff8000;
          color: #fff;
        }
        .red-cell-font div {
          color: rgba($color: #ff0000, $alpha: 0.5);
        }
      }
    }
  }
  .table {
    width: 100%;
    color: #666;
    border-collapse: collapse;
    background-color: #fff;

    td {
      position: relative;
      min-height: 20px;
      padding: 9px 15px;
      font-size: 14px;
      line-height: 20px;
      border: 1px solid #e6e6e6;

      &:nth-child(odd) {
        width: 20%;
        text-align: right;
        background-color: #f7f7f7;
      }
    }
  }
  .table2 {
    width: 100%;
    color: #666;
    border-collapse: collapse;
    background-color: #fff;
    tr {
      &:first-child {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;
        background-color: #f7f7f7;
      }
    }
    td {
      position: relative;
      min-height: 20px;
      padding: 9px 15px;
      font-size: 14px;
      line-height: 20px;
      border: 1px solid #e6e6e6;
      text-align: center;
      &:nth-child(odd) {
        /* width: 20%; */
        /* text-align: right; */
      }
    }
  }
  .printBtn {
    margin-bottom: 20px;
    text-align: right;
  }
  .accountTable {
    margin-bottom: 30px;
  }
  .el-divider {
    ::v-deep {
      .el-divider__text {
        color: #ff8000;
        font-size: 16px;
      }
    }
  }
</style>
